<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
#validate{width:300px;height:40px;background:#DDD;position:relative;border-radius:20px;}
#validate>div{position:absolute;left:0;top:0;height:100%;font-size:18px;user-select:none;}
.bg{background:#1EC507;z-index:1;border-radius:20px;width:40px;}
.txt{color:#666;text-align:center;line-height:38px;z-index:2;width:100%;}
.btn{width:40px;background:#eee;color:#666;text-align:center;line-height:38px;z-index:3;border-radius:20px;}


</style>
<body>
<div id="validate">
	<div class="btn">>></div>
	<div class="txt">请拖动滑块</div>
	<div class="bg"></div>
</div>
</body>
<script type="text/javascript">
/*
1.鼠标在滑块按下：获取鼠标当前的位置(clientX 固定的值)
2.鼠标在按住滑块移动时：获取当前鼠标的位置(clientX 不断变化的值)
--鼠标移动距离：变化的鼠标位置-初始的鼠标位置
--最大限制：滑动槽的宽度-滑块的宽度
--区间：0~最大限制
3.释放鼠标时：判断滑块是否移动到终点
--是：改变文字内容
--否：滑块回到初始位置
 */
function $(selector){
	return document.querySelector(selector);
}
var validate = $("#validate")
var btn = $(".btn"),txt = $(".txt"),bg = $(".bg"),maxDistance = validate.offsetWidth-btn.offsetWidth;
var success = false;
btn.onmousedown = function(e){
	var downX = e.clientX;//获取鼠标位置
	btn.style.transition = "";
	bg.style.transition = "";
	document.onmousemove = function(e){
		var moveX = e.clientX;//变化的值，实时更新
		var offsetX = moveX - downX;//鼠标移动距离，不断变化
		if (offsetX<0) {
			offsetX = 0;
		}
		if (offsetX>maxDistance) {
			offsetX = maxDistance;
		}
		if (offsetX == maxDistance) {
			txt.innerHTML = "通过验证";
			txt.style.color = "#FFF";
			bg.style.backgroundColor="#1DFB09";
			//取消鼠标移动和按下的事件
			document.onmousemove = null;
			btn.onmousedown = null;
			success = true;
		}
		btn.style.left = offsetX+"px";
		bg.style.width = offsetX+40+"px";
    }
    btn.onmouseup = function(){
    	if (!success) {
    		btn.style.left = "0px";
    		bg.style.width = "40px";
    		btn.style.transition = "left 1s";
    		bg.style.transition = "width 1s"
    		document.onmousemove = null;
    	}
    }
}

</script>
</html>

<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#drag_validate{width:300px;height:40px;background:#DDD;position:relative;border-radius:20px;}
#drag_validate>div{position:absolute;left:0;top:0;height:100%;font-size:18px;user-select:none;}
.drag_bg{background:#1EC507;z-index:1;border-radius:20px;width:40px;}
.drag_txt{color:#666;text-align:center;line-height:38px;z-index:2;width:100%;}
.drag_btn{width:40px;background:#eee;color:#666;text-align:center;line-height:38px;z-index:3;border-radius:20px;}
</style>
</head>
<body>
<div id="drag_validate">
	<div class="drag_btn">>></div>
	<div class="drag_txt">请拖动滑块验证</div>
	<div class="drag_bg"></div>
</div>
<script>
/*
1、鼠标在滑块上按下：获取鼠标的clientX （初始值，固定值）
2、鼠标按住滑块移动时：获取当前鼠标的clientX（变化的值）
--鼠标移动距离：变化的鼠标位置-初始的鼠标位置
--最大限制：滑动槽的宽度-滑块的宽度
--区间：0-最大限制
3、释放鼠标时：检测滑块是否移动到终点
--是：改变文字内容，颜色
--否：滑块回到初始位置。
*/
function $(selector){
	return document.querySelector(selector);
}
var validate=$("#drag_validate"),
btn=$(".drag_btn"),
txt=$(".drag_txt"),
bg=$(".drag_bg"),
maxDistance=validate.offsetWidth-btn.offsetWidth,
success=false;

btn.onmousedown=function(e){
	var downX=e.clientX;//获取鼠标的初始位置
	btn.style.transition="";
	bg.style.transition="";
	document.onmousemove=function(e){
		var moveX=e.clientX;//变化的值，实时更新
		var offsetX=moveX-downX;//鼠标移动距离，不断变化
		if(offsetX<0){
			offsetX=0;
		}
		if(offsetX>maxDistance){
			offsetX=maxDistance;
		}
		if(offsetX==maxDistance){
			txt.innerHTML="通过验证";
			txt.style.color="#FFF";
			bg.style.backgroundColor="#1DFB09";
			//取消鼠标移动和按下的事件
			document.onmousemove=null;
			btn.onmousedown=null;
			success=true;
		}
		btn.style.left=offsetX+"px";
		bg.style.width=offsetX+40+"px";
	}
	this.onmouseup=function(){
		if(!success){
			btn.style.left="0px";
			bg.style.width="40px";
			btn.style.transition="left 1s";
			bg.style.transition="width 1s";
			document.onmousemove=null
		}
	}
}

</script>	
</body>
</html>-->